<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!doctype html>
<html class="no-js">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="description" content="">
    <meta name="keywords" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>沃店</title>
    <!-- Set render engine for 360 browser -->
    <meta name="renderer" content="webkit">
    <!-- No Baidu Siteapp-->
    <meta http-equiv="Cache-Control" content="no-siteapp"/>
    <!-- Add to homescreen for Chrome on Android -->
    <meta name="mobile-web-app-capable" content="yes">
    <!-- Add to homescreen for Safari on iOS -->
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-title" content="Amaze UI"/>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/assets/css/amazeui.min.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/assets/css/app.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/assets/css/index.css">
    <!--必要样式-->
    <style type="text/css">
        .menuItem img {
            width: 100%;
        }

        body {
            background-color: #fff;
        }

        header {
            background-color: #ED6D00;
        }

        .type ul {
            margin: 0;
            padding: 0;
            min-height: 470px;
        }

        .type ul li {
            list-style-type: none;
            padding: 10px 0;
            border-bottom: 1px #ccc solid;
            font-size: 15px;
        }

        #shopcar {
            width: 100%;
            background-color: #fff;
        }

        .pay {
            background-color: #ED6D00;
            color: #fff;
            padding: 10px auto;
        }

        .badge {
            display: block;
            position: absolute;
            top: -16px;
            padding-left: 3px;
            z-index: 999;
            width: 16px;
            line-height: 16px;
            height: 16px;
            color: #fff;
            background: #FF4800;
            border-radius: 50%;
            right: 208px;
        }

        .car-item {
            position: fixed;
            width: 100%;
            bottom: 49px;
            background-color: #fff;
        }

        .active {
            background-color: #ED6D00;
            color: #fff;
        }

        .standard {
            float: right;
            font-size: 12px;
            border: 1px #ED6D00 solid;
            margin-top: 3px;
            border-radius: 5px;
            padding: 0 5px;
            color: #ed6d00;
        }

        #bg {
            display: none;
            position: absolute;
            top: 0%;
            left: 0%;
            width: 100%;
            height: 100%;
            background-color: black;
            z-index: 1001;
            -moz-opacity: 0.7;
            opacity: .70;
            filter: alpha(opacity=70);
        }

        #cart {
            display: none;
            z-index: 1002;
        }

        .grey {
            color: #ccc;
        }

        .orange {
            color: #ed6d00;
        }

        #standard {
            display: none;
            position: absolute;
            top: 25%;
            left: 20%;
            width: 60%;
            height: auto;
            padding: 20px 10px;
            background-color: white;
            z-index: 1002;
            overflow: auto;
        }

        #standard .item {
            border: 1px #ccc solid;
            padding-left: 10px;
            padding-right: 10px;
            padding-bottom: 2px;
            border-radius: 15%;
            margin-left: 10px;
            color: #ccc;
            margin-top: 20px;
        }

        .standard-active {
            color: #ed6d00 !important;
            border-color: #ed6d00 !important;
        }
    </style>
</head>

<body>
<header data-am-widget="header" class="am-header am-header-default am-header-fixed">
    <div class="am-header-left am-header-nav">
        <a href="${pageContext.request.contextPath}/clientHome/goShopList" class="">
            <i class="am-header-icon am-icon-chevron-left"></i>
        </a>
    </div>

    <h1 class="am-header-title" style="margin: 0 13%;">
        商家名称
    </h1>

</header>
<div class="am-g" id="goodsList">
    <div class="clearpadding am-u-sm-12">
        <div data-am-widget="tabs" class="clearmargin am-tabs am-tabs-d2">
            <ul class="am-tabs-nav am-cf" id="menu">
                <li class="am-active" onclick="showCart()"><a href="[data-tab-panel-0]">购买</a></li>
                <li class="" onclick="hideCart()"><a href="[data-tab-panel-1]">评价</a></li>
                <li class="" onclick="hideCart()"><a href="[data-tab-panel-2]">商家</a></li>
            </ul>
            <div class=" am-tabs-bd" style="margin-top: 13px;border: 0;">
                <div class=" am-tab-panel am-active" style="padding:0px; overflow: auto;">
                    <div class="clearpadding am-u-sm-3 type" style="border-right: 1px #ccc solid;" align="center">
                        <ul>
                            <li :class="{'active':index == 0}" :id="index" v-for="(item,index) in goodslist">
                                {{item.categoryName}}
                            </li>
                        </ul>
                    </div>
                    <div :id="'type'+index" :style="{display:index == 0?'block':'none'}" class="typelist"
                         v-for="(item,index) in goodslist">
                        <div class="clearpadding am-u-sm-9" style="border-bottom: 1px #ccc solid;padding-bottom: 5px;"
                             v-for="goods in item.goodsList">
                            <div class="am-u-sm-3">
                                <img :src="goods.imageUrl" alt="" width="60" height="60">
                            </div>
                            <div class="am-u-sm-9">
                                <span>{{goods.goodsName}}</span><span style="float: right;" v-on:click="add(goods)"
                                                                      v-if="goods.goodsDetails.length == 1"><i
                                    class="am-icon-plus-circle"
                                    style="margin-top:-3px;font-size: 20px;color: #ED6D00"></i></span>
                                <span style="float: right;" class="standard" v-on:click="select(goods)"
                                      onclick="standardShow()" v-if="goods.goodsDetails.length > 1">选规格</span>
                                <br>
                                <div style="margin-top: 8px;"><span>库存：{{goods.goodsDetails[0].quantity}}</span><span
                                        style="float: right;">￥{{goods.goodsDetails[0].propertyValue}}</span></div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="am-tab-panel " style="padding-bottom:0px;" id="comment">
                    <div class="am-g" style="border-bottom: 5px #f1f1f1 solid;padding-bottom: 10px;">
                        <div class="am-u-sm-5" align="center">
                            <span style="font-size: 30px;color: #ed6d00;">{{scoreNum}}</span><br>
                            <span>综合评分</span>
                        </div>
                        <div class="am-u-sm-7" style="padding: 16px 0;font-size: 24px;">
                            <i class="am-icon-star" style="color:#FFBF13;" v-for="i in scoreLight"></i>
                            <i class="am-icon-star" style="color:#CDCDCD;" v-for="i in 5-scoreLight"></i>
                        </div>
                    </div>
                    <div class="am-g" style="padding:5px 0;border-bottom: 2px #f1f1f1 solid;"
                         v-for="item in commentList">
                        <div class="am-u-sm-2" align="center" style="padding-top: 3px;">
                            <img :src="item.user.avatar" width="40" height="40" style="border-radius: 100%;">
                        </div>
                        <div class="am-u-sm-10">
                            <span>{{item.user.nickname}}</span><br>
                            <span style="font-size: 10px;">
                                <i class="am-icon-star" style="color:#FFBF13;" v-for="i in item.grade"></i>

                                <i class="am-icon-star" style="color:#CDCDCD;" v-for="i in 5-item.grade"></i>
                                <span style="color: #FFBF13;font-weight: bold;">{{item.grade}}</span><span
                                    style="float: right;">{{item.createTime}}</span></span>

                        </div>
                        <div class="am-u-sm-12" style="padding-left: 20px;">
                            {{item.content}}
                        </div>
                    </div>
                </div>
                <div class="am-tab-panel " style="padding-bottom:0px; padding-top: 0px;margin-top:-10px;">
                    <div class="am-u-sm-12" style="padding:5px;border-top:2px #f1f1f1 solid;">
                        <i class="am-icon-phone am-u-sm-1"></i> <span
                            style="margin-left: 3px;">联系电话　${shop.contractPhone}</span>
                    </div>

                    <div class="am-u-sm-12" style="padding:5px;border-top:2px #f1f1f1 solid;">
                        <i class="am-icon-map-marker am-u-sm-1"></i> <span
                            style="margin-left: 3px;">商家地址　${shop.shopAddress}</span>
                    </div>
                    <div class="am-u-sm-12"
                         style="padding:5px;border-top:2px #f1f1f1 solid;border-bottom:2px #f1f1f1 solid;">
                        <i class="am-icon-clock-o am-u-sm-1"></i> <span
                            style="margin-left: 3px;">营业时间　${shop.onlineTime}</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div id="bg" onclick="hide()"></div>
<div id="standard">
    <div class="am-u-sm-12" align="center">
        <span class="item" :class="{'standard-active':item.id == standard.current.id}" v-on:click="select(item)"
              v-for="(item,index) in standard.standardlist">{{item.propertyName}}</span>
        <br>
        <span style="float: left;margin-top: 20px;">￥{{standard.current.propertyValue}}</span><span
            class="am-btn am-btn-warning am-btn-xs am-round" style="float: right;margin-top: 20px;"
            v-on:click="confirm(standard)">确认</span>
    </div>
</div>
<div id="shopcart">
    <div class="car-item" id="cart">
        <div class="am-u-sm-12" style="padding: 10px;border-bottom: 1px #ccc solid;">
            <span style="float: left;"><i class="am-icon-opencart" style="margin-right: 10px;"></i>商家名称</span><span
                v-on:click="closeCart" style="color:#ccc;float: right;"><i class="am-icon-trash"
                                                                           style="margin-right: 10px;"></i>清空购物车</span>
        </div>
        <div class="am-u-sm-12" style="padding: 10px;border-bottom: 1px #ccc solid;" v-for="item in cartlist">
            <span style="float: left;">{{item.name}}</span><span style="float: right;">￥{{item.price * item.num}} <i
                :class="{'grey':item.num <= 1,'orange':item.num>1}" v-on:click="minus(item)"
                class="am-icon-minus-circle" style="margin-left: 40px;margin-right: 20px;"></i> <span
                style="margin-right:20px;">{{item.num}}</span><i v-on:click="add(item)"
                                                                 class="am-icon-plus-circle orange"></i></span>
        </div>

        <div class="am-u-sm-12" style="margin-bottom: 20px;">
        </div>
    </div>
    <div data-am-widget="navbar" class="am-navbar am-cf am-navbar-default shopcar" id="shopcar">
        <div class="am-u-sm-9">
            <img src="${pageContext.request.contextPath}/images/bg.jpg" width="55" height="55"
                 style="border-radius: 100px;margin-top: -25px;margin-left: 8px;" onclick="cart()">
            <span class="badge" v-if="total.num > 0">{{total.num}}</span>
            <span style="margin-left: 10px;">总计：<font style="color:#ED6D00;">￥{{total.total}}</font></span>
        </div>
        <div class="am-u-sm-3 pay" align="center" onclick="pay()">
            去结算
        </div>
    </div>
</div>
<!--[if (gte IE 9)|!(IE)]><!-->
<script src="${pageContext.request.contextPath}/assets/js/jquery.min.js"></script>
<script src="${pageContext.request.contextPath}/assets/js/amazeui.min.js"></script>
<script src="${pageContext.request.contextPath}/layer/layer.js"></script>
<script src="${pageContext.request.contextPath}/assets/js/vue.js"></script>
<script type="text/javascript">
    function cart() {
        if ($("#cart").css("display") == "block") {
            hide();
        } else {
            show();
        }
    }

    function show() {
        $("#bg").css("display", "block");
        $("#cart").css("display", "block");
    }

    function hide() {
        $("#bg").css("display", "none");
        $("#cart").css("display", "none");
        $("#standard").css("display", "none");
    }

    function showCart() {
        $("#shopcar").show();
    }
    function hideCart() {
        $("#shopcar").hide();
    }

    function standardShow() {
        $("#bg").css("display", "block");
        $("#standard").css("display", "block");
    }

    function toString(obj) {
        var str = "";
        $.each(obj, function (i, n) {
            str += n.id;
            str += ",";
            str += n.num;
            str += "#";
        });
        return str;
    }

    //结算
    function pay() {

        $.ajax({
            type: "post",
            url: '${pageContext.request.contextPath}/userGoodsOrder/order',
            data: {"request": toString(cartlist)},
            dataType: 'json',
            success: function (data) {
                if (data.success == true && data.code == 200) {
                    window.location.href = "${pageContext.request.contextPath}/" + data.obj;
                } else {
                    layer.msg(data.msg);
                }
            },
            error: function (data) {
                layer.msg("网络出错！");
            }

        });

    }
    //选择规格的规格列表对象
    var standard = {
        current: {price: 0}
    };
    //购物车上的列表
    var cartlist = [];
    var total = {
        num: 0,
        total: 0
    };
    var comment = new Vue({
        el: "#comment",
        data: {
            score: 0,
            score_light: 4,
            commentList: []
        },
        computed: {
            scoreNum: function () {
                this.modalShow = false;
                this.modalShow = true;
                return this.score;
            },
            scoreLight: function () {
                this.modalShow = false;
                this.modalShow = true;
                return this.score_light;
            }
        }
    });
    var cartList = new Vue({
        el: "#shopcart",
        data: {
            cartlist: cartlist,
            total: total
        },
        methods: {
            minus: function (obj) {
                if (obj.num > 1) {
                    obj.num -= 1;
                    total.total -= obj.price;
                }

            },
            add: function (obj) {
                obj.num += 1;
                total.total += obj.price;
            },
            closeCart: function () {
                this.cartlist.splice(0, this.cartlist.length);
                total.num = 0;
                total.total = 0;
            }
        }
    });
    var standard_item = new Vue({
        el: "#standard",
        data: {
            standard: standard
        },
        methods: {
            select: function (obj) {
                this.standard.current = obj;
            },
            confirm: function (obj) {

                var item = {};
                item.id = obj.current.id;
                item.name = obj.goodsName;
                item.price = obj.current.propertyValue;
                item.num = 1;
                var b = false;
                $.each(cartlist, function (i, n) {
                    console.log(n.id);
                    if (n.id == item.id) {
                        n.num++;
                        total.total += item.price;
                        $("#bg").css("display", "none");
                        $("#standard").css("display", "none");
                        b = true;
                        return;
                    }

                });
                if (b)
                    return;
                cartlist.push(item);
                total.num += 1;
                total.total += item.price;
                $("#bg").css("display", "none");
                $("#standard").css("display", "none");
            }
        }
    });
    var goodsList = new Vue({
        el: "#goodsList",
        data: {
            goodslist: []
        },
        methods: {
            add: function (obj) {
                //console.log(obj.name);
                var item = {};
                item.id = obj.goodsDetails[0].id;
                item.name = obj.goodsName;
                item.price = obj.goodsDetails[0].propertyValue;
                item.num = 1;
                var b = false;
                $.each(cartlist, function (i, n) {
                    console.log(n.id);
                    if (n.id == item.id) {
                        n.num++;
                        total.total += item.price;
                        $("#bg").css("display", "none");
                        $("#standard").css("display", "none");
                        b = true;
                        return;
                    }

                });
                if (b)
                    return;
                cartlist.push(item);
                total.num += 1;
                total.total += item.price;
            },
            select: function (obj) {
                standard.current = obj.goodsDetails[0];
                standard.goodsName = obj.goodsName;
                standard.standardlist = obj.goodsDetails;
                console.log(standard);
            }
        }

    });
    $(function () {
        //获取所有的商品信息
        $.ajax({
            type: "get",
            url: '${pageContext.request.contextPath}/clientUserGoods/findByShop',
            dataType: 'json',
            success: function (data) {
                if (data.success == true && data.code == 200) {
                    goodsList.goodslist = data.obj;
                }
                //tab页切换
                $(".type ul li").click(function () {
                    $(".type ul li").removeClass("active");
                    $(this).addClass("active");
                    var id = $(this).attr("id");
                    $(".typelist").css("display", "none");
                    $("#type" + id).css("display", "block");
                });
            }

        });
        //获取综合评分
        $.ajax({
            type: "get",
            url: '${pageContext.request.contextPath}/clientUserShopComment/findScore',
            dataType: 'json',
            success: function (data) {
                if (data.success == true && data.code == 200) {
                    comment.score = data.obj;
                    comment.score_light = Math.floor(data.obj);
                }
            }

        });

        //获取评论
        $.ajax({
            type: "get",
            url: '${pageContext.request.contextPath}/clientUserShopComment/findByShop',
            dataType: 'json',
            success: function (data) {
                if (data.success == true && data.code == 200) {
                    comment.commentList = data.obj;
                }
            }

        });
    });
</script>
</body>

</html>
